import React, { Component } from 'react';
import './uploadtitle.css'
import placeholder from '../../images/upload.png'
import Uploader from "./upload.js"
import config from "../../config.js"
import $ from 'jquery'
class uploadtitle extends Component{
    constructor(){
        super()
      this.state={
          reload:false,
          uploader:{}
      }
    }
    componentWillMount(){
        var that=this;
        config.sendRequest(config.url.getSign,null,function(res){
            var result=res
                if(result.status==200){
            var getData=function(){
                return result.data
            }
            var opt={
                fileInputId: 'fileinput',
                fileUploadId: 'btn',
                getdata:getData(),
                onProgress:function(curFile){
                    console.log(curFile.status);
                        console.log(curFile.progress);
                        that.props.callbackParent(curFile.progress)
                        if(curFile.status==2){
                            that.setState({
                                reload:true
                            })
                        }
                },
                onok:function(data){
                    var info=JSON.parse(sessionStorage.getItem('info'))
                    var vname=sessionStorage.getItem('vname')

                    var a={
                        uid:info.uid,
                        token:info.token,
                        vid:data,
                        name:vname
                    }
                    
                    $.post(config.url.upload,a,function(r){
                        console.log(r)
                        that.props.callbackParent(100,true)
                            that.setState({
                            reload:false
                        })
                    })
                }
            }
            var uploader= Uploader(opt);
            uploader.init();
        }
    })
    }

    inputtitle(event){
         var name = event.target.value
         console.log(name)
         sessionStorage.setItem('vname',name)
    }
     clickbtn() {
         var that=this;
            config.sendRequest(config.url.getSign,null,function(res){
                var result=res
                    if(result.status==200){
                var getData=function(){
                    return result.data
                }
                var opt={
                    fileInputId: 'fileinput',
                    fileUploadId: 'btn',
                    getdata:getData(),
                    onProgress:function(curFile){
                        console.log(curFile.status);
                            console.log(curFile.progress);
                            that.props.callbackParent(curFile.progress)
                            if(curFile.status==2){
                                that.setState({
                                    reload:true
                                })
                            }
                    },
                    onok:function(data){
                        var info=JSON.parse(sessionStorage.getItem('info'))
                        var vname=sessionStorage.getItem('vname')

                        var a={
                            uid:info.uid,
                            token:info.token,
                            vid:data,
                            name:vname
                        }
                        
                        $.post(config.url.upload,a,function(r){
                            console.log(r)
                            that.props.callbackParent(100,true)
                                that.setState({
                                reload:false
                            })
                        })
                    }
                }
                var uploader= Uploader(opt);
                uploader.init();
		    }
	    })
    }
    render(){
        if(this.state.reload){
            return null
        }else{
                return(
                <div>
                    <div className="upload_toast">
                        <div className="upload_title">标题</div>
                        <div className="upload_content">
                            <div className='upload_video' >
                                <img src={placeholder} id="placehold"/>
                                <input type="file"  id="fileinput" multiple/>
                            </div>
                            <input type="text" id="filename" placeholder='标题不超过50字' onChange={(e)=>this.inputtitle(e)}/>
                        </div>
                        <div id="btn" >确认上传</div>
                    </div>
                </div>
            )
        }
       
    }
}
export default uploadtitle